<template>
  <view>
    <scroll-view class="uni-swiper-tab" scroll-x>
      <view class="scrollx_items" v-for="(item,index) in navList" :key="index" @click="clickNavMenu(item,index)">
        <view style="display: flex;flex-direction: column;align-items: center;">
          <view class="menu_item" style="position: relative">
            <image class="nav-bg" ></image>
<!--            <image v-if="index===0" class="nav-text-bg" src="/static/images/nav-text.png"></image>
            <view v-if="index===0" class="nav-name">{{ item.name }}</view>-->
            <image class="nav-icon" :src="item.image"></image>
          </view>
          <view class="menu_text" >{{ item.name }}</view>
<!--          <view class="menu_text" :class="[index===current?'menu_text_click':'menu_text_no_click']">{{ item.name }}</view>-->
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "home-new-scroll-menus",
  props: {
    navList: {
      type: Array,
      default: []
    },
    current:{
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      menuIndex: 0,
    };
  },
  methods:{
    clickNavMenu(item, index) {
      console.log('导航链接', item)
      if(item){
        if(item.type === 1){
          if (item.name == "联系客服"){
            // #ifdef MP
            const data = uni.getStorageSync('customerServiceData')
            console.log('跳转到客服', data);
            wx.openCustomerServiceChat({
              //企业微信的企业id
              corpId:  data.app.corpId,
              extInfo: {
                //客服链接
                url: data.app.url
              },
              success(res) {
                //console.log('跳转成功', res)
              },
              fail(res) {
                //console.log('跳转失败', res)
              }
            })
            // #endif
          }
          if(item.name == '商家入驻' || item.name == '福利社群') {
            // 判断用户是否登录
            let token = uni.getStorageSync('token')
            if (!token) {
              uni.showModal({
                title: '提示',
                content: '您还未登陆,登录后才能加入福利群领取福利',
                confirmColor: '#FF4910',
                confirmText: '去登录',
                success: function (res) {
                  if (res.confirm) {

                    // #ifdef APP-PLUS
                    uni.navigateTo({
                      url: '/subpackageB/pages/newAppLogin/newAppLogin'
                    })
                    // #endif

                    // #ifdef H5
                    uni.switchTab({
                      url: '/pages/me/me'
                    })
                    // #endif

                    // #ifdef MP-WEIXIN
                    uni.navigateTo({
                      url: '/pages/login/login'
                    })
                    // #endif

                  } else if (res.cancel) {
                    console.log('用户点击取消');
                  }
                }
              });
            } else {
              uni.navigateTo({
                url: item.path,
                success: function (res) {
                  console.log('成功', res)
                },
                fail: function (res) {
                  console.log('失败',)
                }
              })
            }
          }else {
            uni.navigateTo({
              url: item.path,
              success: function(res) {
                console.log('成功', res)
              },
              fail: function(res) {
                console.log('失败',)
              }
            })
          }
        }else if(item.type === 3){
          // #ifdef MP
          const data = uni.getStorageSync('customerServiceData')
          console.log('跳转到客服', data);
          wx.openCustomerServiceChat({
            //企业微信的企业id
            corpId:  data.app.corpId,
            extInfo: {
              //客服链接
              url: data.app.url
            },
            success(res) {
              console.log('跳转成功', res)
            },
            fail(res) {
              console.log('跳转失败', res)
            }
          })
          // #endif
        }else if(item.type === 4){
          console.log('小程序跳转',item)
          const platform = uni.getSystemInfoSync().platform;
          if(platform === 'android' || platform === 'ios'){
            wx.navigateToMiniProgram({
              appId: item.appid,
              path: item.path,
              extraData: {
                //自定义参数
                // foo: 'bar'
              },
              success(res) {
                console.log('跳转成功', res)
              },
              fail(res) {
                console.log('跳转失败', res)
              }
            })
          }else{
            uni.showToast({
              title: '该功能仅支持在微信小程序中使用',
              icon: 'none'
            })
          }


        }
      }
      this.$emit("ClickScrMenu", {item,index})
    }
  }
}
</script>


<style scoped lang="scss">
/deep/ scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.uni-swiper-tab {
  white-space: nowrap;
}


.menu_text {
  font-size: 26rpx;
}

.menu_item {
  position: relative;

  .nav-bg {
    height: 100rpx;
    width: 100rpx;
  }

  .nav-text-bg {
    height: 100rpx;
    width: 100rpx;
    position: absolute;
    left: 0;
    z-index: 2;
  }

  .nav-name {
    position: absolute;
    bottom: 6rpx;
    text-align: center;
    width: 100%;
    color: white;
    font-size: 22rpx;
    z-index: 10;
  }
}

.scrollx_items {
  margin: 0 20rpx;
  display: inline-block;
}

.scrollx_items:last-child {
  //margin-right: 0;
  display: inline-block;
}

.menu_text {
  margin-top: 0rpx;
  font-size: 26rpx;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu_text_click {
  color: #F77A26;
  font-weight: bold;
}
.menu_text_no_click{
  color: #666666;
}
.nav-icon {
  height: 88rpx;
  width: 88rpx;
  margin-left: 10rpx;
  margin-top: 10rpx;
  position: absolute;
  left: 0;
  z-index: 1;
}
</style>